<template>
  <page-header-wrapper>
    <global-search ref="globalSearch" :list="searchList" @search="handleSearch" @reset="handleReset"> </global-search>
    <a-card :bordered="false">
      <s-table
        ref="table"
        size="default"
        :rowKey="(record, index) => index"
        :columns="columns"
        :data="loadData"
        :scroll="{ x: true }"
        :pagination="{ showTotal: (total) => `共 ${total} 条` }"
      >
        <span slot="index" slot-scope="text, record, index">{{ index + 1 }} </span>
        <ellipsis slot="ellipsis" slot-scope="text">{{ text || '/' }}</ellipsis>
        <span slot="empty" slot-scope="text">{{ text || '/' }}</span>
        <span slot="time" slot-scope="text">{{ text | moment }}</span>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { getHousingStatement } from '@/api/statementAndStatistics'
import moment from 'moment'
const now = moment()
export default {
  components: {
    STable,
    Ellipsis
  },
  data () {
    return {
      searchList: [
        {
          label: '时间',
          fields: 'time',
          type: 'month',
          initialValue: now,
          props: {
            placeholder: '请选择时间'
          }
        },
        {
          label: '项目名称',
          fields: 'ProjectName',
          type: 'input',
          props: {
            placeholder: '请输入项目名称'
          }
        }
      ],
      queryParam: {
        Year: now.years(),
        Month: now.month() + 1,
        ProjectName: ''
      },
      columns: [
        {
          title: '类别（市级、政府、企业）',
          align: 'center',
          dataIndex: 'CATEGORY'
        },
        {
          title: '项目名称',
          align: 'center',
          dataIndex: 'PROJECTNAME'
        },
        {
          title: '房屋总套数',
          align: 'center',
          dataIndex: 'ALLHOUSESCOUNT'
        },
        {
          title: '上年度实施配租（套）',
          align: 'center',
          dataIndex: 'LASTYEARINHOUSES'
        },
        {
          title: '正在实施实物配租（套）',
          align: 'center',
          children: [
            {
              title: '入住',
              align: 'center',
              dataIndex: 'INHOUSESNOW'
            },
            {
              title: '物管用房',
              align: 'center',
              dataIndex: 'INHOUSESNOWWG'
            }
          ]
        },
        {
          title: '本月异动（套）',
          align: 'center',
          children: [
            {
              title: '入住',
              align: 'center',
              dataIndex: 'TMONTHIN'
            },
            {
              title: '退房',
              align: 'center',
              dataIndex: 'TMONTHOUT'
            }
          ]
        },
        {
          title: '本月承租人变更（套）',
          align: 'center',
          dataIndex: 'TMONTHALTER'
        },
        {
          title: '本年度',
          align: 'center',
          children: [
            {
              title: '累计入住（套）',
              align: 'center',
              dataIndex: 'YEARALLIN'
            },
            {
              title: '累计退出',
              align: 'center',
              dataIndex: 'YEARALLOUT'
            },
            {
              title: '承租人变更（套）',
              align: 'center',
              dataIndex: 'YEARALTER'
            },
            {
              title: '空置房源（套）',
              align: 'center',
              dataIndex: 'YEARNULL'
            }
          ]
        },
        {
          title: '入住率',
          align: 'center'
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getHousingStatement(requestParameters).then((res) => res)
      }
    }
  },
  methods: {
    handleSearch (values) {
      Object.assign(this.queryParam, {
        Year: values.time.years(),
        Month: values.time.month() + 1,
        ProjectName: values.ProjectName || ''
      })
      this.tableRefresh(true)
    },
    handleReset () {
      Object.assign(this.queryParam, this.$options.data.call(this).queryParam)
      this.tableRefresh(true)
    },
    tableRefresh (refresh = false) {
      this.$refs.table.refresh(refresh)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-table {
  tr,
  td {
    white-space: nowrap;
  }
}
</style>
